<template>
    <el-container style="border: solid 1px #5D7DB3; margin: 35px;">
      <el-header style="background-color: #5D7DB3; display: flex; align-items: center; margin-bottom: 20px;">
        <div class="title">
          <span>纪委信箱</span>
        </div>
      </el-header>
      <div>
        <el-main>
          <el-row :gutter="40">
            <el-col :span="4">
              <!-- 添加按钮 -->
              <el-button style="background-color: #5D7DB3; border:none;" class="add" type="success" icon="el-icon-plus"
                @click="showAddDialog">添加</el-button>
            </el-col>
          </el-row>
          <el-table :data="currentCommissionTableData" border stripe :header-cell-class-name="headerBg"
            @row-click="handleRowClick" :row-class-name="highlightRow">
            <el-table-column prop="emailthree" label="信箱"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="success" @click="openEditDialog(scope.row)">编辑 <i class="el-icon-edit"></i>
                </el-button>
                <el-button type="danger" @click="handleDelete(scope.row)">删除 <i
                    class="el-icon-remove-outline"></i></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
  
        <!-- 添加的弹窗 -->
        <el-dialog title="添加信箱" :visible.sync="addDialogVisible" width="30%" @close="resetForm">
          <el-form :model="form" ref="form" :rules="rules" label-width="100px">
            <el-form-item label="信箱名称" prop="emailthree">
              <el-input v-model="form.emailthree" placeholder="请输入信箱名称"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click=" addDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </div>
        </el-dialog>
        <!-- 编辑行弹窗 -->
        <el-dialog :visible.sync="editDialogVisible" title="编辑" width="30%">
          <el-form :model="editForm" :rules="rules" label-width="100px">
            <el-form-item label="信箱名称" prop="emailthree">
              <el-input v-model="editForm.emailthree" placeholder="请输入信箱名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveEdit">保存</el-button>
              <el-button @click="editDialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <el-footer>
        <el-pagination class="CommissionPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="commissionTableData.length">
        </el-pagination>
      </el-footer>
    </el-container>
  </template>
  
  <script>
  // import axios from 'axios';
  export default {
    data() {
      return {
        commissionTableData: JSON.parse(localStorage.getItem('commissionTableData')) || [],
        currentPage: 1,
        pageSize: 10,
        selectedRow: null,
        addDialogVisible: false,
        editDialogVisible: false,
        editForm: {
          emailthree: '',
        },
        form: {
          emailthree: '',
        },
        rules: {
          emailthree: [
            { required: true, message: '请输入信箱名称', trigger: 'blur' }
          ],
        }
      };
    },
    computed: {
      // 计算当前页的数据
     currentCommissionTableData() {
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        return this.commissionTableData.slice(startIndex, endIndex);
      }
    },
    methods: {
      // 分页大小变化时的回调
      handleSizeChange(val) {
        this.pageSize = val;
      },
      // 当前页变化时的回调
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      saveData() {
        localStorage.setItem('commissionTableData', JSON.stringify(this.commissionTableData));
      },
      showAddDialog() {
        this.addDialogVisible = true;
      },
      resetForm() {
        this.$refs.form.resetFields();
      },
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.commissionTableData.push({
              emailthree: this.form.emailthree,
            });
            this.saveData();
            this.addDialogVisible = false;
            this.$refs.form.resetFields();
          }
        });
      },
      // 选中变颜色
      handleRowClick(row) {
        this.selectedRow = row; // Update the selected row data
      },
      highlightRow(row) {
        return row === this.selectedRow ? 'highlight' : '';
      },
      // 编辑按钮
      openEditDialog(row) {
        this.editDialogVisible = true;
        this.editForm.emailthree = row.emailthree;
      },
      saveEdit() {
        const rowIndex = this.commissionTableData.indexOf(this.selectedRow);
        this.commissionTableData[rowIndex].emailthree = this.editForm.emailthree;
        localStorage.setItem('commissionTableData', JSON.stringify(this.commissionTableData));
        this.editDialogVisible = false;
      },
      // 删除按钮
      handleDelete(row) {
        this.$confirm('此操作将删除该信箱, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const index = this.commissionTableData.indexOf(row);
          if (index >= 0 && index < this.commissionTableData.length) {
            this.commissionTableData.splice(index, 1);
            this.totalItem = this.commissionTableData.length;
            this.saveData();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    created() {
      this.fetchDepartments();
    },
  };
  </script>
  
  <style>
  .title {
    font-size: 30px;
    font-family: 500;
    color: aliceblue;
  }
  
  .highlight {
    background-color: lightblue;
  }
  
  .page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .CommissionPage {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>
  
  